html,body{width: 640px;margin: 0 auto;overflow: hidden;background-color: #000;}
.none{display: none;}
.load{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    background: url(../img/loadingbbg.jpg);
}
.load .loadpic{
	position: absolute;
	left: 241.5px;
	top: 440px;
}
.load .text{
	position: absolute;
	width: 640px;
	height: 32px;
	left: 0px;
	top: 600px;
	color: #FFFFFF;
	font-family: "微软雅黑";
	font-size: 32px;
	text-align: center;
	line-height: 32px;
}
.load #per{
	position: absolute;
	width: 640px;
	height: 32px;
	left: 0px;
	top: 650px;
	color: #FFFFFF;
	font-family: arial;
	font-size: 32px;
	text-align: center;
	line-height: 32px;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
}
.musicrect{
	position: absolute;
	width: 640px;
	height: 46px;
	left: 0px;
	top: 30px;
	z-index: 99;
}
.musicbtn{
    position: absolute;
    left: 540px;
    top: 0px;
    z-index: 99;
}
.p1{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    background: url(../img/bg01.jpg);
}
.p1-pic3{
    position: absolute;
    left: 140px;
    top: 0;
}
@keyframes ufo{
    0%{background-position: 0 0;}
    50%{background-position: -360px 0;}
    100%{background-position: 0 0;}
}
@-webkit-keyframes ufo{
    0%{background-position: 0 0;}
    50%{background-position: -360px 0;}
    100%{background-position: 0 0;}
}
.p1-pic1{
    position: absolute;
    width: 360px;
    height: 597px;
    background: url(../img/P1_png01.png);
    left: 140px;
    top: 0;
    animation:ufo 1s steps(1, start) infinite;
    -webkit-animation:ufo 1s steps(1, start) infinite;
}
@-webkit-keyframes ufolight {
    0% {opacity: 0;}
    39% {opacity: 0;}
    40% {opacity: 1;}
    41%{opacity: 0;}
    59%{opacity: 0;}
    60% {opacity: 1;}
    61%{opacity: 0;}
    64%{opacity: 0;}
    65% {opacity: 1;}
    66%{opacity: 0;}
    74%{opacity: 0;}
    80%{opacity: 1;}
    100% {opacity: 1;}
}

@keyframes ufolight {
    0% {opacity: 0;}
    39% {opacity: 0;}
    40% {opacity: 1;}
    41%{opacity: 0;}
    59%{opacity: 0;}
    60% {opacity: 1;}
    61%{opacity: 0;}
    64%{opacity: 0;}
    65% {opacity: 1;}
    66%{opacity: 0;}
    74%{opacity: 0;}
    80%{opacity: 1;}
    100% {opacity: 1;}
}

.ufolight {
    -webkit-animation-name: ufolight;
    animation-name: ufolight
}
.p1-slogan{
    position: absolute;
    left: 32.5px;
    top: 150px;
}
.p1-cloud1{
    position: absolute;
    left: 20px;
    top: 100px;
}
.p1-cloud2{
    position: absolute;
    right: 20px;
    top: 80px;
}
.p1-cloud3{
    position: absolute;
    left: 70px;
    top: 370px;
}
.p1-cloud4{
    position: absolute;
    right: 65px;
    top: 370px;
}
@-webkit-keyframes cloudl {
    0% {
        -webkit-transform: rotate(-5deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}

@keyframes cloudl {
    0% {
        transform: rotate(-5deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

.cloudl {
    -webkit-animation-name: cloudl;
    animation-name: cloudl
}
@-webkit-keyframes cloudr {
    0% {
        -webkit-transform: rotate(5deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}

@keyframes cloudr {
    0% {
        transform: rotate(5deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

.cloudr {
    -webkit-animation-name: cloudr;
    animation-name: cloudr
}
.p1-txt{
    position: absolute;
    left: 180.5px;
    top: 340px;
}
.p1-guo{
    position: absolute;
    width: 579px;
    height: 491px;
    left: 30.5px;
    top: 480px;
    background: url(../img/P1_png10.png);
}
.guo-1{
    position: absolute;
    left: 105px;
    top: 90px;
}
.guo-2{
    position: absolute;
    left: 105px;
    top: 140px;
}
.guo-3{
    position: absolute;
    left: 140px;
    top: 120px;
}
.guo-4{
    position: absolute;
    left: 210px;
    top: 180px;
}
.guo-5{
    position: absolute;
    left: 280px;
    top: 80px;
}
.guo-6{
    position: absolute;
    left: 340px;
    top: 160px;
}
.guo-7{
    position: absolute;
    left: 390px;
    top: 115px;
}
.guo-8{
    position: absolute;
    left: 420px;
    top: 155px;
}
@-webkit-keyframes thingmove {
    0% {
        -webkit-transform: translate(0,0);
    }
    25% {
        -webkit-transform: translate(2px,1px);
    }
    50% {
        -webkit-transform: translate(-2px,2px);
    }
    75% {
        -webkit-transform: translate(-1px,-1px);
    }
    100% {
        -webkit-transform: translate(0,0);
    }
}

@keyframes thingmove {
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(2px,1px);
    }
    50% {
        transform: translate(-2px,2px);
    }
    75% {
        transform: translate(-1px,-1px);
    }
    100% {
        transform: translate(0,0);
    }
}

.thingmove {
    -webkit-animation-name: thingmove;
    animation-name: thingmove
}
@-webkit-keyframes thingup {
    0% {
        -webkit-transform: translateY(10px) scale(1);
        opacity: 0;
    }
    75% {
        -webkit-transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0) scale(1.1);
        opacity: 0;
    }
}

@keyframes thingup {
    0% {
        transform: translateY(10px) scale(1);
        opacity: 0;
    }
    75% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1.1);
        opacity: 0;
    }
}

.thingup {
    -webkit-animation-name: thingup;
    animation-name: thingup
}
@-webkit-keyframes yanup {
    0% {
        -webkit-transform: translateY(30px);
        opacity: 0;
    }
    80% {
        -webkit-transform: translateY(5px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }
}

@keyframes yanup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        transform: translateY(5px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

.yanup {
    -webkit-animation-name: yanup;
    animation-name: yanup
}
@-webkit-keyframes btninout {
    0% {
        -webkit-transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    60% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1) ;
    }
}

@keyframes btninout {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.btninout {
    -webkit-animation-name: btninout;
    animation-name: btninout
}
.guo-c1{
    position: absolute;
    left: 45px;
    top: 55px;
}
.guo-c2{
    position: absolute;
    left: 150px;
    top: -103px;
}
.guo-c3{
    position: absolute;
    left: 400px;
    top: -5px;
}
.guo-rou{
    position: absolute;
    left: 210px;
    top: 95px;
}
.guo-star{
    position: absolute;
    left: 250px;
    top: 160px;
}
.guo-cir{
    position: absolute;
    left: 180px;
    top: 140px;
}
.guo-cir2{
    position: absolute;
    left: 345px;
    top: 90px;
}
.p1 .btn{
    position: absolute;
    left: 242.5px;
    top: 725px;
}
.p2{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    background: url(../img/bg02.jpg);
}
.p2-turn{
    position: absolute;
    left: 244px;
    top: 120px;
}
.p2-slogan{
    position: absolute;
    left: 0;
    top: 270px;
}
.p2-txt{
    position: absolute;
    left: 158px;
    top: 390px;
}
.p2-num{
    position: absolute;
    width: 48px;
    height: 28px;
    left: 266px;
    top: 390px;
    font-family: arial;
    color: #ff9a00;
    font-size: 36px;
    line-height: 28px;
    font-weight: bold;
}
.p2-guo{
    position: absolute;
    width: 579px;
    height: 491px;
    left: 30.5px;
    top: 480px;
    background: url(../img/P1_png10.png);
}
@keyframes firer{
    0%{background-position: 0 0;}
    50%{background-position: -369px 0;}
    100%{background-position: 0 0;}
}
@-webkit-keyframes firer{
    0%{background-position: 0 0;}
    50%{background-position: -369px 0;}
    100%{background-position: 0 0;}
}
.fire{
    position: absolute;
    width: 369px;
    height: 95px;
    background: url(../img/huo.png);
    left: 100px;
    top: 290px;
    animation:firer 1s steps(1, start) infinite;
    -webkit-animation:firer 1s steps(1, start) infinite;
}
.guo-9{
    position: absolute;
    left: 52px;
    top: 110px;
}
.guo-10{
    position: absolute;
    left: 145px;
    top: 25px;
}
.guo-11{
    position: absolute;
    left: 340px;
    top: 28px;
}
.guo-12{
    position: absolute;
    left: 380px;
    top: 30px;
}
.guo-13{
    position: absolute;
    left: 485px;
    top: 86px;
}
.guo-14{
    position: absolute;
    left: 115px;
    top: 170px;
}
.guo-15{
    position: absolute;
    left: 170px;
    top: 145px;
}
.guo-16{
    position: absolute;
    left: 443px;
    top: 150px;
}
.yan-1{
    position: absolute;
    left: 105px;
    top: 190px;
}
.yan-2{
    position: absolute;
    left: 215px;
    top: 360px;
}
.yan-3{
    position: absolute;
    left: 430px;
    top: 360px;
}
.food{
    position: absolute;
    left: 0;
    top: 160px;
    z-index: 2;
}
.foodin{
    position: absolute;
    left: 300px;
    top: 240px;
    z-index: 2;
}
.p2 .btn{
    position: absolute;
    left: 242.5px;
    top: 725px;
    width: 155px;
    height: 156px;
    z-index: 5;
    background: url(../img/P2_png17.png);
    pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.p2 .btnbigger{
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}
.p2 .nextpt .backer{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.pop{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 199;
}
.pop .window{
    position: absolute;
    background: url(../img/P5_png03.png);
    width: 507px;
    height: 525px;
    left: 66.5px;
    top: 196px;
    /*margin-top: -262.5px;*/
}
.pop .window .foodbox{
    position: absolute;
    width: 100%;
    height: 120px;
    left: 0;
    top: 0;
}
.pop .window .foodbox .img1,.img2,.img3{
    position: absolute;
    left: -66.5px;
    top: 0;
}
.pop .window .timebox{
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0;
    top: 200px;
}
.pop .window .timebox .s{
    position: absolute;
    right: 150px;
    top: 11px;
}
.pop .window .timebox .timenum{
    position: absolute;
    width: 200px;
    height: 60px;
    color: #fbd504;
    font-family: arial;
    right: 185px;
    text-align: right;
    line-height: 60px;
    font-size: 62px;
}
.pop .window .txt{
    position: absolute;
    left: 0;
    top: 280px;
}
.pop .window .nextbtn,.seebtn{
    position: absolute;
    left: 116.5px;
    top: 390px;
}
.p3{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    background: url(../img/bg06.jpg);
}
.p3 .f1 .txtbox{
    position: absolute;
    background: url(../img/P6_png01.png);
    width: 548px;
    height: 172px;
    left: 46px;
    top: 125px;
}
.f1,.f2,f3{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
}
.p3 .f1 .txtbox .timenum{
    position: absolute;
    width: 150px;
    height: 60px;
    color: #ff5a00;
    font-family: arial;
    right: 52px;
    top: 58px;
    text-align: right;
    line-height: 60px;
    font-size: 56px;
}
.p3 .f1 .txt2{
    position: absolute;
    left: 64.5px;
    top: 320px;
}
.p3 .f1 .bac{
    position: absolute;
    left: 85.5px;
    top: 270px;
}
.p3 .f1 .bei{
    position: absolute;
    left: 195.5px;
    top: 370px;
}
.p3 .f1 .bac2{
    position: absolute;
    left: 85.5px;
    top: 320px;
}
.p3 .f1 .bei2{
    position: absolute;
    left: 195.5px;
    top: 420px;
}
.p3 .f1 .txt{
    position: absolute;
    left: 46.5px;
    top: 680px;
}
.p3 .f1 .lotter_btn{
    position: absolute;
    left: 50px;
    top: 750px;
    width:250px;
    height:120px;
    background-color:rgba(0,0,0,0)
}
.p3 .f1 .f1btnl{
    position: absolute;
    left: 23px;
    top: 810px;
}
.p3 .f1 .f1btnr{
    position: absolute;
    left: 323px;
    top: 810px;
}
.p3 .f2 .txtbox{
    position: absolute;
    background: url(../img/P7_png02.png);
    width: 514px;
    height: 178px;
    left: 63px;
    top: 125px;
}
.p3 .f2 .txtbox .timenum{
    position: absolute;
    width: 150px;
    height: 60px;
    color: #ff5a00;
    font-family: arial;
    right: 33px;
    top: 72px;
    text-align: right;
    line-height: 60px;
    font-size: 56px;
}
.p3 .f2 .txtbox .timenum2{
    position: absolute;
    width: 74px;
    height: 40px;
    color: #c183d4;
    font-family: arial;
    left: 145px;
    top: 145px;
    text-align: center;
    line-height: 40px;
    font-size: 35px;
}
.p3 .f2 .txt{
    position: absolute;
    left: 46.5px;
    top: 665px;
}
.p3 .f2 .lotter_btn{
    position: absolute;
    left: 122px;
    top: 810px;
    width:100px;
    height:27px;
    background-color:rgba(0,0,0,0)

}
.p3 .f2 .star{
    position: absolute;
    left: 221px;
    top: 425px;
}
.p3 .f2 .star2{
    top: 460px;
}
.p3 .f2 .f2btnl{
    position: absolute;
    left: 23px;
    top: 810px;
}
.p3 .f2 .f2btnr{
    position: absolute;
    left: 323px;
    top: 810px;
}
.p3 .f3 .txt{
    position: absolute;
    left: 79.5px;
    top: 125px;
}
.p3 .f3 .f3btnl{
    position: absolute;
    left: 23px;
    top: 810px;
}
.p3 .f3 .f3btnr{
    position: absolute;
    left: 323px;
    top: 810px;
}
.p3 .f3 .star{
    position: absolute;
    left: 221px;
    top: 480px;
}
.share{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    background-color: rgba(0,0,0,0.6);
    z-index: 199;
}
.share img{
    position: absolute;
    right: 0;
    top: 30px;
}
@-webkit-keyframes mscplay {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes mscplay {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mscplay {
    -webkit-animation-name: mscplay;
    animation-name: mscplay;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}
@-webkit-keyframes loadmov {
    0% {
        -webkit-transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes loadmov {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

.loadmov {
    -webkit-animation-name: loadmov;
    animation-name: loadmov;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    .container{overflow-y: scroll !important;-webkit-overflow-scrolling : touch;}
    .p1,.p2,.p3{top: -60px;height: 1050px;}
}